<template>
  <div>
    <el-button type="primary" size="small" style="margin: 15px 0 15px 15px" @click="addClick">新增</el-button>
    <!-- table表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed type="index" prop="name" label="#" width="50">
      </el-table-column>
      <el-table-column prop="name" label="题目" width="500"> </el-table-column>
      <el-table-column prop="province" label="分类" width="180">
      </el-table-column>
      <el-table-column prop="city" label="作者" width="180"> </el-table-column>
      <el-table-column prop="address" label="发布时间" width="200">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="50%">
      <div style="padding: 15px">
        <el-page-header @back="fhClick" title="返回"> </el-page-header>
      </div>

      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="题目">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.cid" placeholder="请选择类别">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项">
          <el-checkbox-group v-model="form.answers">
            <div
              class="el-checkbox-row"
              v-for="(item, index) in form.options"
              :key="index"
            >
              <el-checkbox :label="getLetter(index)"></el-checkbox>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="item.value"
              >
              </el-input>
              <el-button
                v-if="index == form.options.length - 1"
                type="primary"
                icon="el-icon-plus"
                @click="addChecklist"
                circle
              ></el-button>
              <el-button
                v-if="index > 3"
                type="danger"
                icon="el-icon-minus"
                @click="delcheckClick(index)"
                circle
              ></el-button>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="答案">
          <div></div>
        </el-form-item>
        <el-form-item label="答案提示">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">确定</el-button>
          <el-button size="small" @click="cancelClick">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      // tableData: [],
      drawer: false,
      form: {
        answers: [],
        options: [{ value: "" }, { value: "" }, { value: "" }, { value: "" }]
      },
      textarea: ""
    };
  },
  methods: {
    ...mapActions("test", [
      "getquestions",
      "addquestions",
      "delquestions",
      "updatequestions"
    ]),
    ...mapActions("classify", ["getClassify"]),

    addClick() {
      this.drawer = true;
      //点击新增 是表单变为初始状态
      this.form = {
        answers: [],
        options: [{ value: "" }, { value: "" }, { value: "" }, { value: "" }]
      };
    },
    addChecklist() {
      this.form.options.push({ value: "" });
    },
    jianClick() {
      console.log(123);
    },
    cancelClick() {
      this.drawer = false;
    },
    delcheckClick(index) {
      this.form.options.splice(index, 1);
      let form = this.form;
      form.answers.forEach((answer) => {
        var isTure = false;
        form.options.forEach((option) => {
          if (answer == option.text) {
            isTure = true;
          }
        });
        if (!isTure) {
          form.answers.splice(form.answers.indexOf(answer), 1);
        }
      });
    },
    fhClick() {
      this.drawer = false;
    },
    getLetter(index) {
      return String.fromCharCode("A".charCodeAt() + index);
    },
  },
  mounted() {
    this.getquestions();
  },
  computed: {
    ...mapState("study", ["tableData"]),
    doSort() {
      let tru = this.initOptions.filter(v => {
        return v.checked;
      });
      return tru.map((v, i) => v.text);
    }
  }
};
</script>

<style scoped>
.el-checkbox-row {
  display: flex;
}

.el-checkbox-row .el-textarea {
  margin-left: 10px;
  width: 50%;
}
</style>